import React, { useState, useEffect, useMemo } from "react";
import { useRequest } from "ahooks";
import { getFetch } from "@/utils/doFetch";
import { ScrollBoard } from "@jiaminghi/data-view-react";
import moment from "moment";
import { notification, Button, message } from "antd";
import { history } from "umi";
import cdata from "../mock";
let statusname = {
  stalled: "待处理",
  pending: "处理中",
  completed: "已完成",
};

const color = {
  中: "#ff4800",
  高: "red",
  低: "#e2ee05",
};

const Rfidata = ({ data }) => {
  console.log(data);
  let config = useMemo(() => {
    return {
      header: ["序号", "设备", "楼层", "位置", "级别", "报警时间", "操作"],
      headerBGC: "rgba(30,79,140,0.5)",
      evenRowBGC: "rgba(100,143,194,0.1)",
      oddRowBGC: "rgba(255,255,255,0.1)",
      hoverPause: !(data && data.length < 5),
      rowNum: 4,
      data: data
        ? data?.map((it) => {
            return [
              it?.no,
              it?.devices,
              it?.floor,
              it?.position,
              `<div class="center" style="width:34px;height:20px;margin-top:10px; padding:0px 4px;border:2px solid ${
                color[it?.level]
              };color:${color[it?.level]}" className='center'>${
                it?.level
              }</span>`,
              moment(it?.time).format("YYYY-MM-DD HH:mm:ss"),
              `
        <div>
          <a>处理</a>
        </div>
        `,
            ];
          })
        : [],
    };
  }, [data]);

  return (
    <ScrollBoard
      config={config}
      style={{ width: "100%", height: "100%" }}
      onClick={(row) => {
        let cur = data?.filter((it, i) => row?.rowIndex == i)[0];
        notification.info({
          message: "已通知相关负责人及时处理！",
          description: (
            <div>
              报警设备:{cur?.devices} <br />
              报警时间:{cur?.time}
              <br />
              <div className="centerl">
                报警级别:
                <div
                  className="center"
                  style={{
                    width: 34,
                    height: 20,
                    borderRadius: 4,
                    border: `2px solid ${color[cur?.level]}`,
                    color: color[cur?.level],
                  }}
                >
                  {cur?.level}
                </div>
              </div>
              <Button
                onClick={() => {
                  const its = cdata.rgc;

                  if(!cur?.remark){
                    notification.warning({
                      message:"您未更新设备具体位置信息！请更新后在三维地图上查看！"
                    });
                    return
                  }
                  history.push(
                    `/dashboard3d?name=${its?.title}&dong=${1}&score=${
                      its?.score
                    }&active=1单元1&okeys=${cur?.remark}&deviceid=${
                      cur?.device_id
                    }`
                  );
                }}
              >
                查看
              </Button>
            </div>
          ),
        });
      }}
    />
  );
};

export default Rfidata;
